<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>博客管理</title>
    <link rel="shortcut icon" href="/image/favicon.ico"/>
    <!-- Font Awesome -->
    <link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <!-- Bootstrap core CSS -->
    <link href="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.css" rel="stylesheet">
    <!-- Material Design Bootstrap -->
    <link href="/css/mdb.css" rel="stylesheet">
    <link href="/css/home.css" rel="stylesheet">
    <style>
        .row table td {
            padding: 5px;
            margin: 0px;
            vertical-align: middle;
        }
    </style>
</head>

<body class="creative-lp">

<!-- Navigation & Intro -->
<header>

    <!-- Navbar -->
    <nav th:replace="~{admin/common :: nav}"></nav>

</header>
<!-- Navigation & Intro -->

<!-- Main content -->
<main class="pt-3" id="app">

    <!--Blog-->
    <section>

        <div class="container mt-5 pt-3">

            <header style="height: 100%;padding-top: 30px;">
                <div align="left">
                    <table style="width: 100%">
                        <tr>
                            <td>
                                <form class="form-inline" onsubmit="return false">
                                    <div class="form-group">
                                        <input id="blogTitle" type="text" class="form-control"
                                               placeholder="请输入关键字以查找">
                                        <a class="btn blue-gradient btn-rounded btn-sm font-weight-normal"
                                           onclick="searchBlog()">
                                            <i class="fa fa-search"></i>&nbsp;&nbsp;搜索</a>
                                    </div>
                                </form>
                            </td>
                            <td align="middle">
                                <a class="btn pink-gradient btn-rounded btn-sm font-weight-normal"
                                   target="_blank" onclick="addBlog()">
                                    <i class="fa fa-plus-square"></i>&nbsp;&nbsp;新增文章</a>
                            </td>
                        </tr>
                    </table>
                </div>
            </header>
            <div class="row">

                <!--Sidebar-->
                <div class="col-lg-2 col-md-1 px-3">
                    <!--Author-->
                    <section class="mb-2">
                        <hr>
                        <p class="font-weight-bold dark-grey-text text-center spacing">
                            <strong th:text="${jianshu.author.nickname}"></strong>
                        </p>
                        <hr>
                        <!--Avatar-->
                        <div class="d-flex justify-content-center mt-4">
                            <img th:src="${jianshu.author.avatar}" class="img-fluid rounded img-author z-depth-1"
                                 style="width: 80px;height: 80px;">
                        </div>
                        <!--Description-->
                        <p class="mt-3 dark-grey-text font-small text-center">
                            <em th:text="${jianshu.author.description}"></em>
                        </p>
                        <ul class="list-unstyled inline-ul circle-icons list-unstyled flex-center">
                            <!--qq-->
                            <li>
                                <a class="fb-ic mx-3" th:if="${custom.qq}"
                                   th:href="'http://wpa.qq.com/msgrd?v=3&uin='+ ${custom.qq} +'&site=qq&menu=yes'"
                                   target="_blank">
                                    <i class="fa fa-qq"> </i>
                                </a>
                            </li>
                            <!--github-->
                            <li>
                                <a class="tw-ic mx-3" th:if="${custom.githubUrl}" th:href="${custom.githubUrl}"
                                   target="_blank">
                                    <i class="fa fa-github"> </i>
                                </a>
                            </li>
                            <!--gitee-->
                            <li>
                                <a class="gplus-ic mx-3" th:if="${custom.gitlabUrl}" th:href="${custom.gitlabUrl}"
                                   target="_blank">
                                    <i class="fa fa-gitlab"> </i>
                                </a>
                            </li>
                        </ul>

                    </section>
                    <!--Author-->

                    <!--Title-->
                    <hr>
                    <p class="font-weight-bold dark-grey-text text-center spacing">
                        <strong>专栏</strong>
                    </p>
                    <hr>
                    <!--Section: Recent posts-->
                    <section class="section mb-2">

                        <!--/*@thymesVar id="jianshu" type="com.anymk.controller.BlogController"*/-->
                        <div class="post-border" th:each="collection : ${jianshu.ownCollections}">
                            <div class="row mt-4">
                                <div class="col-5">
                                    <div class="view overlay z-depth-1 rounded mb-1" style="width: 40px;height: 40px;">
                                        <img th:src="${collection.avatar}" class="img-fluid" alt="Post">
                                        <a>
                                            <div class="mask rgba-white-slight"></div>
                                        </a>
                                    </div>
                                </div>
                                <div class="col-7 mb-1">
                                    <div class="">
                                        <p class="mb-1">
                                            <a th:href="'/admin/c/' + ${collection.id}"
                                               class="text-hover font-weight-bold"
                                               th:text="${collection.title}"></a>
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="post-border" v-for="collection in collections">
                            <div class="row mt-4">
                                <div class="col-5">
                                    <div class="view overlay z-depth-1 rounded mb-3">
                                        <img v-bind:src="collection.avatar" class="img-fluid" alt="Post">
                                        <a>
                                            <div class="mask rgba-white-slight"></div>
                                        </a>
                                    </div>
                                </div>
                                <div class="col-7 mb-1">
                                    <div class="">
                                        <p class="mb-1">
                                            <a v-bind:href="'/admin/c/' + collection.id"
                                               class="text-hover font-weight-bold"
                                               v-html="collection.title"></a>
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="row mt-4" v-if="hasMoreCollection">
                            <h6 class="">
                                <a class="text-primary" @click="onMoreCollection"> 展开更多 >> </a>
                            </h6>
                        </div>

                    </section>
                    <!--Section: Recent posts-->

                    <!--Title-->
                    <hr>
                    <p class="font-weight-bold dark-grey-text text-center spacing">
                        <strong>分类</strong>
                    </p>
                    <hr>

                    <!--Archive-->
                    <section class="archive mb-5">
                        <!--Grid row-->
                        <div class="row">
                            <!--Grid column-->
                            <div class="col-md-12 text-center">

                                <!--List-->
                                <ul class="list-unstyled  mt-3">
                                    <li th:each="notebook : ${jianshu.notebooks}">
                                        <h6 class="">
                                            <a th:href="'/admin/nb/' + ${notebook.id}" class="dark-grey-text"
                                               th:text="${notebook.name}"></a>
                                        </h6>
                                    </li>

                                    <li v-for="nb in nbs">
                                        <h6 class="">
                                            <a v-bind:href="'/nb/' + nb.id" class="dark-grey-text" v-html="nb.name"></a>
                                        </h6>
                                    </li>

                                    <li v-if="hasMoreNotebook">
                                        <h6 class="">
                                            <a class="text-primary" @click="onMoreNotebook"> 展开更多 >> </a>
                                        </h6>
                                    </li>
                                </ul>
                                <!--List-->
                            </div>
                            <!--Grid column-->
                        </div>
                        <!--Grid row-->
                    </section>
                    <!--Archive-->
                    <a href="/admin/blog/crawl">获取最新文章，爬爬爬。。。</a>
                </div>
                <!--Sidebar-->

                <!--Main listing-->
                <div class="col-lg-9 col-10 mt-1 mx-lg-4">

                    <!--Section: Classic blog listing-->
                    <section class="section classic-blog-listing">

                        <!-- Grid row -->
                        <div class="row">

                            <div class="widget-body no-padding">
                                <table id="dt-table"
                                       class="table table-striped table-bordered table-hover"
                                       style="width: 100%">
                                    <thead>
                                    <tr></tr>
                                    <tr class="col-lg-12 col-md-6 mb-4 text-center">
                                        <th>标题</th>
                                        <th>概述</th>
                                        <th>编辑</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <tr class="col-lg-12 col-md-6 mb-4" th:each="article : ${jianshu.articles}">
                                        <td>
                                            <a href="" class="dark-grey-text card-title" th:text="${article.title}"></a>
                                        </td>
                                        <td>
                                            <a href="" class="dark-grey-text" th:text="${article.description}"></a>
                                        </td>
                                        <td style="width: 15%; text-align: center;vertical-align: middle;">
                                            <a class="btn blue-gradient btn-rounded btn-sm font-weight-normal"
                                               th:onclick="'javascript:updateBlog(\''+${article.id}+'\');'" target="_blank">
                                                <i class="fa fa-edit"></i>&nbsp;修改</a>
                                        </td>
                                    </tr>
                                    <!-- 加载更多 -->
                                    <tr class="col-lg-12 col-md-6 mb-4" v-for="article in articles">
                                        <td>
                                            <a href="" class="dark-grey-text card-title" v-html="article.title"></a>
                                        </td>
                                        <td>
                                            <a href="" class="dark-grey-text" v-html="article.description"></a>
                                        </td>
                                        <td style="width: 15%; text-align: center;vertical-align: middle;">
                                            <a class="btn blue-gradient btn-rounded btn-sm font-weight-normal"
                                               v-bind:href="'javascript:updateBlog(\''+article.id+'\');'" target="_blank">
                                                <i class="fa fa-edit"></i>&nbsp;修改</a>
                                        </td>
                                    </tr>

                                    <!-- /加载更多 -->
                                    </tbody>
                                </table>
                            </div>

                        </div>
                        <!--Grid row-->
                    </section>
                    <!--Section: Classic blog listing-->

                    <!-- 进度条 -->
                    <div class="row mb-5" v-if="loading">
                        <!--Big blue-->
                        <div class="preloader-wrapper big active" style="margin: 0 auto">
                            <div class="spinner-layer spinner-yellow-only">
                                <div class="circle-clipper left">
                                    <div class="circle"></div>
                                </div>
                                <div class="gap-patch">
                                    <div class="circle"></div>
                                </div>
                                <div class="circle-clipper right">
                                    <div class="circle"></div>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
                <!--Main listing-->
            </div>
        </div>
    </section>
    <!--/Blog-->
</main>
<!-- Main content -->
<!-- 返回顶部 -->
<section>
    <div class="fixed-action-btn" style="bottom: 45px; right: 24px;">
        <a class="btn-floating btn-lg purple-gradient" style="display:none;" id="goTop">
            <i class="fa fa-arrow-up" aria-hidden="true"></i>
        </a>
    </div>
</section>

<!-- 网站底部 -->
<footer th:replace="~{common :: footer}"></footer>
<!-- /网站底部 -->

<!-- JQuery -->
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<!-- Bootstrap core JavaScript -->
<script src="https://cdn.bootcss.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<!-- MDB core JavaScript -->
<script src="https://cdn.bootcss.com/mdbootstrap/4.5.0/js/mdb.min.js"></script>
<script src="https://cdn.bootcss.com/underscore.js/1.8.3/underscore-min.js"></script>
<script src="https://cdn.bootcss.com/vue/2.5.3/vue.min.js"></script>
<script>
    //Animation init
    new WOW().init();

    // 返回顶部
    $(function () {
        $(window).scroll(function () {
            if ($(window).scrollTop() > 500) {
                $("#goTop").fadeIn(200);
            }
            else {
                $("#goTop").hide(200);
            }
        });
        $("#goTop").click(function () {
            $('html,body').animate({'scrollTop': 0}, 500);
        });
    });

    // 监听滚动事件
    window.addEventListener('scroll', _.throttle(function () {
        if (window.pageYOffset + window.innerHeight >= document.documentElement.scrollHeight) {
            if (!app.end) {
                app.loading = true;
                app.page++;
                var api = window.location.pathname + "/" + app.page;
                $.get(api, function (response) {
                    if (response.code === 0) {
                        var list = response.data.articles;
                        for (var i = 0; i < list.length; i++) {
                            app.articles.push(list[i]);
                        }
                        if (list.length < 10) {
                            app.end = true;
                        }
                    }
                    app.loading = false;
                })
            }
        }
    }, 500), false);

    function searchBlog() {
        var title = $('#blogTitle').val();
        window.location.href = "/admin/blog_search?title=" + title;
    }


    function addBlog() {
        window.location.href = "/admin/edit";
    }
    function updateBlog(id) {
        //拿到id，到完整信息表中将详情查询出来
        window.location.href = "/admin/blog/edit/"+id;
    }

    // 博客列表
    var app = new Vue({
        el: '#app',
        data: {
            page: 1,
            articles: [],
            end: [[${jianshu.articles.size() < 10}]],
            loading: false,
            hasMoreNotebook: [[${jianshu.notebookTotalPages > 1}]],
            hasMoreCollection: [[${jianshu.ownCollectionTotalPages > 1}]],
            notebookPage: 2,
            collectionPage: 2,
            nbs: [],
            collections: []
        },
        methods: {
            onMoreNotebook: function () {
                var api = "/nbs/" + this.notebookPage;
                $.get(api, function (response) {
                    if (response.code === 0) {
                        var list = response.data.notebooks;
                        for (var i = 0; i < list.length; i++) {
                            app.nbs.push(list[i]);
                        }
                        if (list.length < 10) {
                            app.hasMoreNotebook = false;
                        }
                    }
                });
                this.notebookPage++;
            },
            onMoreCollection: function () {
                var api = "/cs/" + this.collectionPage;
                $.get(api, function (response) {
                    if (response.code === 0) {
                        var list = response.data.ownCollections;
                        for (var i = 0; i < list.length; i++) {
                            app.collections.push(list[i]);
                        }
                        if (list.length < 10) {
                            app.hasMoreCollection = false;
                        }
                    }
                });
                this.collectionPage++;
            }
        }
    })
</script>

</body>

</html>